<template>
  <form-panel :form="data.form" :submitUrl="data.submitUrl" ref="formPanelRef" @update="update"
              :queryUrl="data.queryUrl" :id="data.id" class="brandForm">
    <el-form-item
        label="品牌名称"
        :rules="[
          { required: true, message: '请输入品牌名称', trigger: 'blur' }
        ]"
        prop="name"
    >
      <v-input v-model="data.form.name" placeholder="请输入品牌名称" isShowCounter :width="data.width"
               :maxlength="10"
      />
    </el-form-item>
    <el-form-item
        label="英文简称"
        :rules="[{ required: true, message: '请输入英文简称', trigger: 'blur' }]"
        prop="logoName"
    >
      <v-input v-model="data.form.logoName" placeholder="请输入英文简称" :width="data.width" isShowCounter
               :maxlength="10"/>
    </el-form-item>
    <el-form-item
        label="成立时间"
        :rules="[{ required: true, message: '请选择成立时间', trigger: 'blur' }]"
        prop="createBrandTime"
    >
      <v-date-picker v-model:dataValue="data.form.createBrandTime" placeholder="请选择成立时间" :is-picker="false"
                     type="year" format="YYYY" :width="data.width" valueFormat="YYYY"/>
    </el-form-item>
    <el-form-item
        label="创建地点"
        :rules="[{ required: true, message: '请输入创建地点', trigger: 'blur' }]"
        prop="createLocation"
    >
      <v-input v-model="data.form.createLocation" placeholder="请输入创建地点" :width="data.width" isShowCounter
               :maxlength="10"/>
    </el-form-item>
    <el-form-item
        label="品牌描述"
        :rules="[{ required: true, message: '请输入品牌描述', trigger: 'blur' }]"
        prop="description"
    >
      <v-input v-model="data.form.description" placeholder="请输入品牌描述" :width="data.width" type="textarea"
               isShowCounter :maxlength="300"/>
    </el-form-item>
  </form-panel>
</template>
<script lang="ts" setup>
import {reactive, onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'

// let $message: any = inject('$message')
const $route = useRoute();
const data = reactive({
  form: {
    name: '',
    createLocation: '',
    createBrandTime: '',
    logoName: '',
    description: ''
  },
  bikeBodyParams: [
    {
      name: '',
      content: '',
      uid: Math.random().toString().slice(15)
    }
  ],
  id: '',
  submitUrl: '',
  conventionFromTitle: '新增单车',
  userId: undefined,
  mode: '',
  queryUrl: '/api/brand/getDetail',
  brandSelectOption: [],
  width: 290,
})
const formPanelRef = ref()

onMounted(() => {
  const {id} = $route.query
  if (id === undefined) {
    data.mode = 'create'
    data.submitUrl = '/api/brand/add'
    data.conventionFromTitle = '新增单车'
  } else {
    data.mode = 'update'
    data.id = id as string;
    data.submitUrl = '/api/brand/update'
    data.conventionFromTitle = '编辑单车'
    formPanelRef.value.getData({
      id
    })
  }
})

const update = (params) => {
  Object.keys(params).forEach(key => {
    if (data.form[key] !== undefined) {
      data.form[key] = params[key]
    }
  })
}

</script>
<style scoped lang="scss">

</style>
